<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>

<script type="text/x-template" id="data-table" th:fragment="data-table">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th style="text-align:center; width:60px;">序号</th>
                <th v-for="(column, name) in columns" style="text-align:center; cursor:pointer;" v-if="column.type !== 'hidden'" v-on:click="orderBy(name)">
                    {{column.title}}
                    <span class="glyphicon glyphicon-triangle-bottom" v-show="orderDown(name)"/>
                    <span class="glyphicon glyphicon-triangle-top" v-show="orderUp(name)"/>
                </th>
                <th style="width:68px;">&nbsp;</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in items.data">
                <td style="text-align: center;">{{(items.pageInfo.page-1) * items.pageInfo.size + index + 1}}</td>
                <td v-for="(column, name) in columns" v-if="column.type !== 'hidden'" 
                    v-text="column.options ? column.options[item[name]] : item[name]"></td>
                <td style="padding-left:5px; text-align:center;">
                    <span class="glyphicon glyphicon-edit" title="编辑" v-on:click="editItem(item.href, $event)" style="cursor:pointer;"></span>
                    <span class="glyphicon glyphicon-trash" title="删除" v-on:click="deleteItem(item.href, $event)" style="cursor:pointer;"></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</script>

<script type="text/x-template" id="page-navigation" th:fragment="page-navigation">
    <div class="div-navigation">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li v-on:click="toPage(pageinfo.isFirst ? 1 : pageinfo.page - 1)">
                    <a class="pagination-a-pre" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li v-for="p in [...Array(pageinfo.totalPage + 1).keys()]" :class="(pageinfo.page == p) ? 'active' : ''" v-on:click="toPage(p)">
                    <a class="pagination-a" v-if="p > 0">{{p}}</a>
                </li>
                <li v-on:click="toPage(pageinfo.isLast ? pageinfo.totalPage : pageinfo.page + 1)">
                    <a class="pagination-a-next" aria-label="Next">
                        <span  aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="goto">
                    跳转至  <input type="text" name="page" id="page" value="" data-max-page="{{pageinfo.totalPage}}" class="form-control"/> 页
                    <input type="button" id="btn-gotoPage" class="btn-default" value="跳转" v-on:click="toPage(page.value)"/>
                </li>
            </ul>
        </nav>
    </div>
</script>

<script type="text/x-template" id="div-additem" th:fragment="div-additem">
    <div class="table-responsive div-addItem" style="display:none; padding:20px 50px 20px;" id="maintain-form">
        <form id="edit-form">
            <div v-for="(item, itemName) in columns" :class="{'form-group':true, 'has-feedback':errors.has(itemName), 'has-error':errors.has(itemName)}">
                <p class="input-group" v-show="item.type !== 'hidden'">
                    <label class="input-group-addon" v-text="item.title"></label>
                    <template v-if="item.type === 'hidden'">
                        <input type="hidden" :name="itemName" class="form-control" />
                    </template>
                    <template v-else-if="item.type === 'textarea'">
                            <textarea :name="itemName" class="form-control" value=""></textarea>
                    </template>
                    <template v-else-if="item.type === 'select'">
                        <select class="form-control" :name="itemName"
                                v-on:change="itemChanged($event)"
                                :changeSets="item.changeSets"
                                :ddList="item.ddList">
                            <option :value="opt_val" v-for="(opt_lbl, opt_val) in item.options">{{opt_lbl}}</option>
                        </select>
                    </template>
                    <template v-else-if="item.type === 'radio'">
                        <label class="radio-inline" v-for="(opt_lbl, opt_val) in item.options">
                            <input type="radio" :name="itemName" :value="opt_val" />{{opt_lbl}}
                        </label>
                    </template>
                    <template v-else="">
                        <input :type="item.type" :name="itemName" class="form-control" :title="item.hint" :placeholder="item.hint"
                            v-on:change="itemChanged($event)"
                            :changeSets="item.changeSets"
                            :ddList="item.ddList"
                            v-validate="item.validator"
                            :data-vv-as="item.title"
                        />
                    </template>
                </p>
                <div class="help-block with-errors" v-if="item.type !== 'hidden'" v-text="errors.first(itemName)"></div>
            </div>
        </form>
    </div>
</script>

</body>
</html>